<template>
    <div id="systemSet">
        <div class="systemSet-content">
            <h3 class="customManage_title" style="margin-bottom: 50px">修改密码</h3>
            <el-form
                :model="form"
                :rules="rules"
                ref="form"
                label-width="160px"
                style="width: 500px"
            >
                <el-form-item prop="oldPass" label="原密码">
                    <el-input type="password" v-model="form.oldPass"></el-input>
                </el-form-item>
                <el-form-item prop="newPass" label="新密码">
                    <el-input type="password" v-model="form.newPass"></el-input>
                </el-form-item>
                <el-form-item prop="newPass1" label="再次确认新密码">
                    <el-input type="password" v-model="form.newPass1"></el-input>
                </el-form-item>
            </el-form>
            <br>
            <div style="margin-left: 60px">
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import '../../assets/css/systemSet.css'
import {
    systemEditPwd
} from '@/admin/api.js'
export default {
    data() {
        var oldPass = (rule, value, callback) => {
            if (!value) {
                callback(new Error('原密码不能为空'));
            } else {
                callback();
            }
        };
        var newPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('新密码不能为空'));
            } else {
                callback();
            }
        };
        var newPass1 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newPass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {
                oldPass: '',
                newPass: '',
                newPass1: ''
            },
            rules: {
                oldPass: [
                    { validator: oldPass, trigger: 'blur' }
                ],
                newPass: [
                    { validator: newPass, trigger: 'blur' }
                ],
                newPass1: [
                    { validator: newPass1, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    systemEditPwd(this.form).then(() => {
                        this.$message({
                            type: 'success',
                            message: `密码修改成功`
                        });
                        this.$refs.form.resetFields();
                    })
                }
            });
        }
    }
  }
</script>

<style lang="less">
#systemSet .systemSet-content {
  display: block;
}
</style>
